import React from "react";
import { Spring, animated } from "react-spring";

const NUMBERS = [
    0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0, 1, 2, 3, 4, 5,
    6, 7, 8, 9,
];

function getRandomIntInclusive(min, max) {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

const defaultConfigs = [
    { "mass": 1, "tension": 130, "friction": 40 },
    { "mass": 2, "tension": 140, "friction": 40 },
    { "mass": 3, "tension": 130, "friction": 40 }
]

const AnimatedNumber = ({
    animateToNumber,
    fontStyle,
    configs = defaultConfigs,
    includeComma,
    onFinish,
    onStart,
    disableAnimate
}) => {
    const animteTonumberString = String(Math.abs(animateToNumber));
    const animateToNumbersArr = Array.from(animteTonumberString, Number);
    const [onStarted, setOnStarted] = React.useState(false);
    const [onFinished, setOnFinished] = React.useState(false);

    React.useEffect(() => {
        if (onStarted && onStart) {
            onStart();
            setOnStarted(false);
        }
        if (onFinished && onFinish) {
            onFinish();
            setOnFinished(false);
        }
    }, [onStarted, onFinished, onFinish, onStart]);

    if (includeComma) {
        const reducedArray = new Array(
            Math.ceil(animteTonumberString.length / 3)
        ).fill(0);

        reducedArray.forEach((__, index) => {
            if (index === 0) {
                return;
            }

            animateToNumbersArr.splice(
                animteTonumberString.length - index * 3,
                0,
                ","
            );
        });
    }

    const [numberHeight, setNumberHeight] = React.useState(0);

    const numberDivRef = React.useRef(null);

    const fontSize = fontStyle ? fontStyle.fontSize : 0;

    React.useEffect(() => {
        setNumberHeight(numberDivRef.current.clientHeight);
    }, [animateToNumber, fontSize]);

    return (
        <div>
            {numberHeight !== 0 && (
                <div
                    style={{ display: "flex", flexDirection: "row", alignItems: "baseline" }}
                    className="animated-container"
                >
                    {animateToNumber < 0 && <div style={fontStyle}>-</div>}
                    {animateToNumbersArr.map((n, index) => {
                        if (typeof n === "string") {
                            return (
                                <div key={index} style={{ ...fontStyle }}>
                                    {n}
                                </div>
                            );
                        }
                        let a = `translateY(${-1 * (numberHeight * animateToNumbersArr[index]) -
                            numberHeight * 20
                            })`;
                        return (
                            <div
                                key={index}
                                style={{
                                    height: numberHeight,
                                    overflow: "hidden",
                                }}
                            >
                                {isNaN(animateToNumbersArr[index]) ? <div style={fontStyle}>.</div> : (disableAnimate ? animateToNumbersArr[index] : <Spring
                                    key={animateToNumbersArr[index]}
                                    from={{
                                        transform: "translateY(0px)",
                                    }}
                                    to={{
                                        transform: a,
                                    }}
                                    onRest={() => setOnFinished(true)}
                                    onStart={() => setOnStarted(true)}
                                    config={
                                        configs
                                            ? configs[getRandomIntInclusive(0, configs.length - 1)]
                                            : undefined
                                    }
                                >
                                    {(props) =>
                                        NUMBERS.map((number, i) => (
                                            <animated.div key={i} style={{ ...props, ...fontStyle }}>
                                                {number}
                                            </animated.div>
                                        ))
                                    }
                                </Spring>)}
                            </div>
                        );
                    })}
                </div>
            )}

            <div
                ref={numberDivRef}
                style={{ position: "absolute", top: -9999, ...fontStyle }}
            >
                {0}
            </div>
        </div>
    );
};

export default AnimatedNumber;


// WEBPACK FOOTER //
// ./src/components/common/animate-number/index.js